<template>
  <div class="evolution-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">🔄 宝可梦进化系统</h1>
      <p class="page-subtitle">选择宝可梦查看其进化链，并执行进化操作</p>
    </div>

    <!-- 宝可梦选择区域 -->
    <div class="pokemon-selector-section">
      <div class="selector-header">
        <h2>选择进化宝可梦</h2>
        <p>请从下方列表中选择要查看进化链的宝可梦</p>
      </div>
      
      <div class="selector-container">
        <el-select
          v-model="selectedPokemonId"
          placeholder="请选择宝可梦"
          filterable
          clearable
          size="large"
          style="width: 100%; max-width: 500px;"
          @change="handlePokemonSelect"
          :loading="selectorLoading"
        >
          <el-option
            v-for="pokemon in pokemonList"
            :key="pokemon.id"
            :label="`#${pokemon.number} ${pokemon.pokemonName}`"
            :value="pokemon.id"
          >
            <div class="pokemon-option">
              <img 
                :src="pokemon.imageUrl" 
                :alt="pokemon.pokemonName"
                class="pokemon-option-image"
                @error="handleImageError"
              />
              <div class="pokemon-option-info">
                <span class="pokemon-number">#{{ pokemon.number }}</span>
                <span class="pokemon-name">{{ pokemon.pokemonName }}</span>
              </div>
            </div>
          </el-option>
        </el-select>
      </div>
    </div>

    <!-- 进化链显示区域 -->
    <div v-if="selectedPokemonId && !evolutionLoading" class="evolution-chain-section">
      <div class="chain-header">
        <h2>进化链</h2>
        <p v-if="selectedPokemon">{{ selectedPokemon.pokemonName }} 的进化关系</p>
      </div>

      <!-- 进化链展示 -->
      <div v-if="evolutionChains.length > 0" class="evolution-chain">
        <div class="evolution-path">
          <div 
            v-for="(chain, index) in evolutionChains" 
            :key="`chain-${index}`"
            class="evolution-step"
          >
            <!-- 进化前的宝可梦 -->
            <div class="pokemon-card">
              <div class="pokemon-image-container">
                <img 
                  :src="chain.fromPokemon?.imageUrl" 
                  :alt="chain.fromPokemon?.pokemonName"
                  class="pokemon-image"
                  @error="handleImageError"
                />
              </div>
              <div class="pokemon-info">
                <span class="pokemon-number">#{{ chain.fromPokemon?.number }}</span>
                <span class="pokemon-name">{{ chain.fromPokemon?.pokemonName }}</span>
              </div>
            </div>

            <!-- 进化箭头和条件 -->
            <div class="evolution-arrow">
              <div class="arrow">→</div>
              <div class="evolution-condition">
                <span v-if="chain.minLevel">Lv.{{ chain.minLevel }}</span>
                <span v-if="chain.evolutionCondition">{{ chain.evolutionCondition }}</span>
              </div>
            </div>

            <!-- 进化后的宝可梦 -->
            <div class="pokemon-card">
              <div class="pokemon-image-container">
                <img 
                  :src="chain.toPokemon?.imageUrl" 
                  :alt="chain.toPokemon?.pokemonName"
                  class="pokemon-image"
                  @error="handleImageError"
                />
              </div>
              <div class="pokemon-info">
                <span class="pokemon-number">#{{ chain.toPokemon?.number }}</span>
                <span class="pokemon-name">{{ chain.toPokemon?.pokemonName }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 无进化链提示 -->
      <div v-else class="no-evolution">
        <el-empty description="该宝可梦没有进化链数据">
          <template #image>
            <div class="empty-icon">🔍</div>
          </template>
        </el-empty>
      </div>

      <!-- 进化操作区域 -->
      <div v-if="evolutionActions && evolutionActions.canEvolve" class="evolution-actions">
        <div class="actions-header">
          <h3>可执行的进化操作</h3>
        </div>
        <div class="action-buttons">
          <el-button
            v-for="evolution in evolutionActions.availableEvolutions"
            :key="evolution.targetPokemonId"
            type="primary"
            size="large"
            @click="executeEvolution(evolution)"
            :loading="evolutionExecuting"
          >
            进化为 {{ evolution.targetPokemonName }}
          </el-button>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="evolutionLoading" class="loading-section">
      <el-skeleton :rows="3" animated />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
// 移除了所有提示
import { getPokemonSelectorList } from '../api/pokemon.api.js'
import { 
  getPokemonEvolutionChain, 
  getEvolutionActions, 
  executeEvolution as apiExecuteEvolution 
} from '../api/evolution.api.js'

// 响应式数据
const pokemonList = ref([])
const selectedPokemonId = ref(null)
const selectedPokemon = ref(null)
const evolutionChains = ref([])
const evolutionActions = ref(null)

// 加载状态
const selectorLoading = ref(false)
const evolutionLoading = ref(false)
const evolutionExecuting = ref(false)

// 获取宝可梦列表
const loadPokemonList = async () => {
  try {
    selectorLoading.value = true
    const response = await getPokemonSelectorList()
    if (response.flag) {
      pokemonList.value = response.data || []
    } else {
      // 移除了提示
    }
  } catch (error) {
    // 移除了控制台提示
    // 移除了提示
  } finally {
    selectorLoading.value = false
  }
}

// 处理宝可梦选择
const handlePokemonSelect = async (pokemonId) => {
  if (!pokemonId) {
    selectedPokemon.value = null
    evolutionChains.value = []
    evolutionActions.value = null
    return
  }

  try {
    evolutionLoading.value = true
    
    // 找到选中的宝可梦
    selectedPokemon.value = pokemonList.value.find(p => p.id === pokemonId)
    
    // 获取进化链
    const chainResponse = await getPokemonEvolutionChain(pokemonId)
    if (chainResponse.flag) {
      evolutionChains.value = chainResponse.data || []
    } else {
      evolutionChains.value = []
    }
    
    // 获取进化操作
    const actionsResponse = await getEvolutionActions(pokemonId)
    if (actionsResponse.flag) {
      evolutionActions.value = actionsResponse.data
    } else {
      evolutionActions.value = null
    }
    
  } catch (error) {
    // 移除了控制台提示
    // 移除了提示
  } finally {
    evolutionLoading.value = false
  }
}

// 执行进化操作
const executeEvolution = async (evolution) => {
  try {
    // 移除了确认弹框，直接执行进化

    evolutionExecuting.value = true
    
    const request = {
      pokemonId: selectedPokemonId.value,
      actionType: 'evolve',
      targetPokemonId: evolution.targetPokemonId
    }
    
    const response = await apiExecuteEvolution(request)
    if (response.flag) {
      // 移除了提示
      // 重新加载进化信息
      await handlePokemonSelect(selectedPokemonId.value)
    } else {
      // 移除了提示
    }
    
  } catch (error) {
    if (error !== 'cancel') {
      // 移除了控制台提示
      // 移除了提示
    }
  } finally {
    evolutionExecuting.value = false
  }
}

// 处理图片加载错误
const handleImageError = (event) => {
  event.target.src = '/placeholder-pokemon.png' // 使用占位图
}

// 组件挂载时加载数据
onMounted(() => {
  loadPokemonList()
})
</script>

<style scoped>
.evolution-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 页面标题 */
.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-title {
  font-size: 2.5rem;
  color: #2c3e50;
  margin-bottom: 10px;
  font-weight: bold;
}

.page-subtitle {
  font-size: 1.1rem;
  color: #7f8c8d;
  margin: 0;
}

/* 选择器区域 */
.pokemon-selector-section {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.selector-header {
  text-align: center;
  margin-bottom: 25px;
}

.selector-header h2 {
  color: #2c3e50;
  margin-bottom: 8px;
}

.selector-header p {
  color: #7f8c8d;
  margin: 0;
}

.selector-container {
  display: flex;
  justify-content: center;
}

/* 选择器选项样式 */
.pokemon-option {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.pokemon-option-image {
  width: 40px;
  height: 40px;
  margin-right: 12px;
  border-radius: 6px;
  object-fit: cover;
}

.pokemon-option-info {
  display: flex;
  flex-direction: column;
}

.pokemon-number {
  font-size: 0.85rem;
  color: #7f8c8d;
  font-weight: 500;
}

.pokemon-name {
  font-size: 1rem;
  color: #2c3e50;
  font-weight: 600;
}

/* 进化链区域 */
.evolution-chain-section {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.chain-header {
  text-align: center;
  margin-bottom: 30px;
}

.chain-header h2 {
  color: #2c3e50;
  margin-bottom: 8px;
}

.chain-header p {
  color: #7f8c8d;
  margin: 0;
}

/* 进化链展示 */
.evolution-path {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.evolution-step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.pokemon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 2px solid #e1e8ed;
  border-radius: 12px;
  background: #f8f9fa;
  transition: all 0.3s ease;
  min-width: 160px;
}

.pokemon-card:hover {
  border-color: #3498db;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);
}

.pokemon-image-container {
  width: 80px;
  height: 80px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pokemon-image {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 50%;
}

.pokemon-info {
  text-align: center;
}

.pokemon-info .pokemon-number {
  display: block;
  font-size: 0.9rem;
  color: #7f8c8d;
  margin-bottom: 4px;
}

.pokemon-info .pokemon-name {
  display: block;
  font-size: 1.1rem;
  color: #2c3e50;
  font-weight: 600;
}

/* 进化箭头 */
.evolution-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.arrow {
  font-size: 2rem;
  color: #3498db;
  font-weight: bold;
}

.evolution-condition {
  background: #3498db;
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

/* 无进化链提示 */
.no-evolution {
  text-align: center;
  padding: 40px;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 20px;
}

/* 进化操作区域 */
.evolution-actions {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #e1e8ed;
}

.actions-header {
  text-align: center;
  margin-bottom: 20px;
}

.actions-header h3 {
  color: #2c3e50;
  margin: 0;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

/* 加载状态 */
.loading-section {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .evolution-container {
    padding: 15px;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .evolution-step {
    flex-direction: column;
    gap: 15px;
  }
  
  .evolution-arrow .arrow {
    transform: rotate(90deg);
  }
  
  .pokemon-card {
    min-width: 140px;
  }
}
</style>